<script lang='ts' setup>
import { reactive, Ref, ref } from 'vue';
import SecurityAnonymousServiceApi from '/@/api/org/bean/security-anonymous'
import MicroServiceSelectInput from '/@/views/org/micro-service/component/org-micro-service-select-input.vue'

//model-form ref对象
const JxtechModelFormRef = ref();
//定义事件
const emit = defineEmits<{
    (e: 'add-success', data: any, res: any): void//保存成功回调
}>()

//定义属性
const props = defineProps({
    anonymousId: {
        type: String,
        default: ''
    },
})

const rules = {
    microServiceId: [{ required: true, message: '请选择所属微服务', trigger: 'blur' }],
    httpmethod: [{ required: true, message: '请选择HTTP方法', trigger: 'blur' }],
    url: [{ required: true, message: '请输入URL', trigger: 'blur' }],
}
//表单数据
const SecurityAnonymousFormData: Ref<any> = ref({
    anonymousId: props.anonymousId,
})
//组件对象
const SecurityAnonymousFormState = reactive({
    primaryKey: 'anonymousId',
    // 新增成功
    onAddSuccess: (formData: any, res: any) => {
        emit("add-success", formData, res)
    },
    // 表单回调函数
    callback: {
    },
})
// 对外提供方法
defineExpose({
    save: () => JxtechModelFormRef.value.save(),
})
</script>
<template>
    <jxtech-model-form
        ref="JxtechModelFormRef"
        :primary-key="SecurityAnonymousFormState.primaryKey"
        :service-api="SecurityAnonymousServiceApi"
        :form-data="SecurityAnonymousFormData"
        :rules="rules"
        @save-success="SecurityAnonymousFormState.onAddSuccess"
        :callback="SecurityAnonymousFormState.callback"
    >
        <el-row>
            <el-col :span="21" :offset="1">
                <el-row>
                    <el-col :span="12">
                        <jxtech-model-form-item label="所属微服务" prop="microServiceId">
                            <micro-service-select-input
                                v-model:micro-service-id="SecurityAnonymousFormData.microServiceId"
                                v-model:micro-service-name="SecurityAnonymousFormData.microServiceName"
                                placeholder="请输入所属微服务"
                            ></micro-service-select-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="HTTP方法" prop="httpmethod">
                            <jxtech-dictionary-select
                                placeholder="请选择HTTP方法"
                                codeItemId="HTTP_METHOD"
                                v-model="SecurityAnonymousFormData.httpmethod"
                            ></jxtech-dictionary-select>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <jxtech-model-form-item label="URL" prop="url">
                            <el-input
                                placeholder="请输入URL"
                                v-model="SecurityAnonymousFormData.url"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </jxtech-model-form>
</template>